<template>
  <component>
       <el-card class="el-card-d" shadow="always">
            <div class="infinite-list-wrapper" style="overflow:auto;">
               <el-timeline
                 infinite-scroll-disabled="disabled">
               <div v-if="allmessages.length>0">
                 <el-timeline-item v-for="(item,index) in allmessages"  :key="index" :timestamp='item.createTime' placement="top">
                   <div>{{item.created}}</div>
                   <el-card class="el-card-m" style="height:120px">
                     <h4 style="color: #0066CC;padding: 10px;font-weight: bold;margin-bottom: 10px;">{{addUserModel.username}}：</h4>
                     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.word}}</p>
                   </el-card>
                 </el-timeline-item>
               </div>

               <div v-else>
                  <el-timeline-item placement="top">
                   <el-card class="el-card-m" style="height:120px">
                     <h4 style="color: #0066CC;">系统小助手：</h4>
                     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 说点什么吧😁</p>
                   </el-card>
                 </el-timeline-item>
               </div>
             </el-timeline>
             </div>
             <div class="el-card-messages" style="margin-bottom: 100px;">
                <el-input type="textarea" :rows="5" placeholder="输入留言" maxlength="200" v-model="addUserModel.word"></el-input>
                <el-button type="info" round class="submit-message" @click="submitMessage" style="margin-top: 20px;">留言</el-button>
             </div>
           </el-card>
</component>
</template>

<script>
export default {
  // 初始化函数
  created () {
    // 动态获取左侧菜单信息
    this.getMenuList()
    // 设定模式选中按钮
    this.defaultActive = window.sessionStorage.getItem('activeMenu')
  },
  data () {
    return {
      // 左侧菜单数据
      // message: '',
      menuList: [],
      // username: '',
      menuIcon: {
        1: 'iconfont iconuser',
        2: 'iconfont iconquanxian',
        5: 'iconfont iconuser',
        7: 'iconfont iconquanxian',
        12: 'iconfont iconziyuan',
        15: 'el-icon-loading'
      },
      // 定义是否折叠
      isCollapse: false,
      // 是否展现折叠动态效果
      isCollapseTransition: false,
      // 定义默认高亮
      defaultActive: '',
      allmessages: [],
      addUserModel: {
        username: this.username,
        word: ''
      }
    }
  },
  created () {
    this.addUserModel.username = sessionStorage.getItem('username')// 在登陆页时存储数据，此时取数据
    console.log(this.addUserModel.username)
    this.getInfo(this.addUserModel.username)
  },
  methods: {
    async submitMessage () {
      // 如果校验失败 则停止数据
      if (this.addUserModel.word == '' || this.addUserModel.word.replace(/(^\s*)|(\s*$)/g, '') == '') {
        this.$message('写点啥提交也行呀😉')
      } else {
        console.log('************************')
        console.log(this.addUserModel)
        const { data: result } = await this.$http.post('/new/addUserWord', this.addUserModel)
        if (result.status !== 200) return this.$message.error('添加留言失败')
        this.$message.success('留言添加成功')
        // 关闭对话框
        // 重新获取用户列表
        this.getInfo(this.addUserModel.username)
      }
    },
    // submitMessage () {
    //   if (this.message == '' || this.message.replace(/(^\s*)|(\s*$)/g, '') == '') {
    //     this.$message('写点啥提交也行呀😉')
    //   } else {

    //   }
    // },
    //  这里往下写调用后端的代码；,
    async getInfo (username) {
      const { data: result } = await this.$http.get('/new/select/' + this.addUserModel.username)
      this.allmessages = result.data
      console.log('++++++++++++++++')
      console.log(result.data)
    }
  }
}
</script>

<style>
     .infinite-list-wrapper{
        width: 100%;
        height: 500px;
      }
      .submit-message{
          width: 100%;
          background: rgb(235, 245, 247);
          color: cadetblue;
          letter-spacing:20px;
      }
   @media screen and (max-width: 3000px) and (min-width: 767px) {
      .el-card-d{
        float: left;
        margin-top: 20px;
        margin-left: 10%;
        width: 80%;
        height: 90%;
      }

     }
    /*
    屏幕小于768px的
    */
    @media screen and (max-width:768px) and (min-width: 100px){
       .el-card-d{
        width: 100%;
        height: 100%;
      }
    }

</style>
